<template>
<div :style="{height : offsetheight + 'px',}">

    <div style="width:300px;" class="fl" >
        <div class="danyuan">
        	<div v-for="(item, index) in floordata" :key="'a' + index"
        	class="fl text-center mr10" @click="clickDanyuan(index)"
        	>
        		{{item.name}}
        	</div>
        </div>

        <div class="lou mt5" :style="{height : offsetheight - 55 + 'px',}">

        	<Row v-for="(item, index) in floordata[danyuan].list" :key="'a' + index"
        	class="mt10"
        	>
        		<div class="fl mr10 ceng">{{item.name}}</div>
        		<div class="fl hulist">
	        		<div class="fl mr10 hu" v-for="(item1, index1) in item.list" :key="'b' + index1" @click="clickHu(index, index1)">
	        			{{item1.name}}
	        		</div>
        		</div>
        	</Row>

        </div>
    </div>
    <div class="fl ml15" :style="{width : offsetwidth - 410 + 'px',}">
    	<div>{{currentHu}} 所有户籍人口</div>
        <div class="header" >
        	<div >
        		<div class="fl person mr10 mt10" v-for="(item, index) in person" 
        		:key="index" @click="clickPerson(item)">
        			{{item.name}} (户籍人口) <br>
        			{{item.cardno}}
        		</div>
        	</div>
        </div>

        <div class=" content " 
        :style="{height : offsetheight - 115 + 'px',}" >
        	{{currentPerson}}
        </div>
    </div>

</div>
</template>

<script>


export default {
	
	name : 'building',
	
	data () {
		return {
		  	offsetheight : document.documentElement.clientHeight - 130,
			offsetwidth : document.documentElement.clientWidth - 240,


			danyuan : 0,

			currentHu : '',

			currentPerson : {},


			floordata : [
				{
					name : '1单元',
					list : [
						{
							name : '1f',
							list : [
								{
									name : '1-1-1',
								},
								{
									name : '1-1-2',
								},
								{
									name : '1-1-3',
								},
								{
									name : '1-1-4',
								},
								{
									name : '1-1-4',
								},
								{
									name : '1-1-4',
								},
								{
									name : '1-1-4',
								},
								{
									name : '1-1-4',
								},
								{
									name : '1-1-4',
								},
								{
									name : '1-1-4',
								},
							],
						},
						{
							name : '2f',
							list : [
								{
									name : '1-2-1',
								},
								{
									name : '1-2-2',
								},
								{
									name : '1-2-3',
								},
								{
									name : '1-2-4',
								},
							],
						},
						{
							name : '3f',
							list : [
								{
									name : '1-3-1',
								},
								{
									name : '1-3-2',
								},
								{
									name : '1-3-3',
								},
								{
									name : '1-3-4',
								},
							],
						},
						{
							name : '3f',
							list : [
								{
									name : '1-3-1',
								},
								{
									name : '1-3-2',
								},
								{
									name : '1-3-3',
								},
								{
									name : '1-3-4',
								},
							],
						},
						{
							name : '3f',
							list : [
								{
									name : '1-3-1',
								},
								{
									name : '1-3-2',
								},
								{
									name : '1-3-3',
								},
								{
									name : '1-3-4',
								},
							],
						},
						{
							name : '3f',
							list : [
								{
									name : '1-3-1',
								},
								{
									name : '1-3-2',
								},
								{
									name : '1-3-3',
								},
								{
									name : '1-3-4',
								},
							],
						},
						{
							name : '3f',
							list : [
								{
									name : '1-3-1',
								},
								{
									name : '1-3-2',
								},
								{
									name : '1-3-3',
								},
								{
									name : '1-3-4',
								},
							],
						},
						{
							name : '3f',
							list : [
								{
									name : '1-3-1',
								},
								{
									name : '1-3-2',
								},
								{
									name : '1-3-3',
								},
								{
									name : '1-3-4',
								},
							],
						},
						{
							name : '3f',
							list : [
								{
									name : '1-3-1',
								},
								{
									name : '1-3-2',
								},
								{
									name : '1-3-3',
								},
								{
									name : '1-3-4',
								},
							],
						},
						{
							name : '3f',
							list : [
								{
									name : '1-3-1',
								},
								{
									name : '1-3-2',
								},
								{
									name : '1-3-3',
								},
								{
									name : '1-3-4',
								},
							],
						},
						{
							name : '3f',
							list : [
								{
									name : '1-3-1',
								},
								{
									name : '1-3-2',
								},
								{
									name : '1-3-3',
								},
								{
									name : '1-3-4',
								},
							],
						},
						{
							name : '3f',
							list : [
								{
									name : '1-3-1',
								},
								{
									name : '1-3-2',
								},
								{
									name : '1-3-3',
								},
								{
									name : '1-3-4',
								},
							],
						},
						{
							name : '3f',
							list : [
								{
									name : '1-3-1',
								},
								{
									name : '1-3-2',
								},
								{
									name : '1-3-3',
								},
								{
									name : '1-3-4',
								},
							],
						},
						{
							name : '3f',
							list : [
								{
									name : '1-3-1',
								},
								{
									name : '1-3-2',
								},
								{
									name : '1-3-3',
								},
								{
									name : '1-3-4',
								},
							],
						},

					],
				},
				{
					name : '2单元',
					list : [
						{
							name : '1f',
							list : [
								{
									name : '2-1-1',
								},
								{
									name : '2-1-2',
								},
								{
									name : '2-1-3',
								},
								{
									name : '2-1-4',
								},
							],
						},
						{
							name : '2f',
							list : [
								{
									name : '2-2-1',
								},
								{
									name : '2-2-2',
								},
								{
									name : '2-2-3',
								},
								{
									name : '2-2-4',
								},
							],
						},
						{
							name : '3f',
							list : [
								{
									name : '2-3-1',
								},
								{
									name : '2-3-2',
								},
								{
									name : '2-3-3',
								},
								{
									name : '2-3-4',
								},
							],
						},
					],
				},
				{
					name : '3单元',
					list : [
						{
							name : '1f',
							list : [
								{
									name : '3-1-1',
								},
								{
									name : '3-1-2',
								},
								{
									name : '3-1-3',
								},
								{
									name : '3-1-4',
								},
							],
						},
						{
							name : '2f',
							list : [
								{
									name : '3-2-1',
								},
								{
									name : '3-2-2',
								},
								{
									name : '3-2-3',
								},
								{
									name : '3-2-4',
								},
							],
						},
						{
							name : '3f',
							list : [
								{
									name : '3-3-1',
								},
								{
									name : '3-3-2',
								},
								{
									name : '3-3-3',
								},
								{
									name : '3-3-4',
								},
							],
						},
					],
				},
				{
					name : '4单元',
					list : [
						{
							name : '1f',
							list : [
								{
									name : '4-1-1',
								},
								{
									name : '4-1-2',
								},
								{
									name : '4-1-3',
								},
								{
									name : '4-1-4',
								},
							],
						},
						{
							name : '2f',
							list : [
								{
									name : '4-2-1',
								},
								{
									name : '4-2-2',
								},
								{
									name : '4-2-3',
								},
								{
									name : '4-2-4',
								},
							],
						},
						{
							name : '3f',
							list : [
								{
									name : '4-3-1',
								},
								{
									name : '4-3-2',
								},
								{
									name : '4-3-3',
								},
								{
									name : '4-3-4',
								},
							],
						},
					],
				},
			],

			person : [
				{
					name : '亚瑟',
					cardno : '210333333333333333',
					sex : '男',
				},
				{
					name : '白起',
					cardno : '210333333333333333',
					sex : '男',
				},
				{
					name : '迦逻',
					cardno : '210333333333333333',
					sex : '女',
				},
				{
					name : '张飞',
					cardno : '210333333333333333',
					sex : '男',
				},
			],
		}
		
	},

	props : {

	},

	components : {
		
	},

	computed : {

	},

	methods : {
		clickDanyuan (index) {
			this.danyuan = index;

			console.log(this.floordata[this.danyuan]);
		},


		clickHu (i, j) {
			console.log(this.floordata[this.danyuan].list[i].list[j].name);
			this.currentHu = this.floordata[this.danyuan].list[i].list[j].name;

		},

		clickPerson (item) {

			console.log(item);

			this.currentPerson = item;
		}
	},

	watch : {
	    
	},

	mounted () {
		
	},

}
</script>

<style scoped>
.header {

	height: 100px;
	display: flex;
	overflow-x: scroll;
	overflow-y: hidden;
}

.header div {
	flex-shrink: 0;
}

.danyuan {
	height: 50px;
	display: flex;
	overflow-x: scroll;
	overflow-y: hidden;
}

.danyuan div{
	width: 80px;
	height: 35px;
	padding-top: 5px;
	border : 1px solid #000;
	flex-shrink: 0;
	cursor: pointer;
}

.lou {
	overflow-y:auto
}

.ceng, .hu {
	width: 50px;
	height: 50px;
	text-align: center;
	padding-top: 10px;
	border : 1px solid #000;
}

.hulist {
	width : 240px;
}

.hu {
	cursor: pointer;
	margin-bottom: 5px;
}

.person {
	width: 200px;
	border : 1px solid #000;
	height: 60px;
	text-align: center;
	padding-top: 5px;
	cursor: pointer;
}

.fl {
	float: left;
}

.text-center {
	text-align: center;
}

.mr10 {
	margin-right: 10px;
}

.mt5 {
	margin-top: 5px;
}

.mt10 {
	 margin-top: 10px;
}

.ml15 {
	margin-left: 15px;
}
</style>
